<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2466550" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">3.1分享</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b4;</span>
                <div class="name">评论</div>
                <div class="code-name">&amp;#xe8b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">人员管理</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">个人中心</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">其他</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">快进</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">录制</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">上一首</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">快退</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">停止</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">下一首</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">随机02</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">喜欢02</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">循环03</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">随机05</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">循环01</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">循环07</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">音符01</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">喜欢01</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">循环09</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">音频列表</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">随机01</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">音符04</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">循环06</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">随机04</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">循环02</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">音符03</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">循环08</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">音符05</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">循环05</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">音符02</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">播放列表</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">唱片</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">标签</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">聊天</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">唱歌</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">排行</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">积分</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">开心</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">上一首</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe722;</span>
                <div class="name">全选</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe723;</span>
                <div class="name">电台</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe724;</span>
                <div class="name">音乐1</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe725;</span>
                <div class="name">听歌</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe726;</span>
                <div class="name">刷新</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe727;</span>
                <div class="name">识别</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe728;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe729;</span>
                <div class="name">下一首</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72a;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72b;</span>
                <div class="name">文件</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72c;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72e;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72f;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">社区</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe731;</span>
                <div class="name">音乐2</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">电台</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">伴奏</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">歌唱</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">排行</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">喜爱</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">歌手</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">比赛</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">老师</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">女声</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">分类2</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">分类1</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">童声</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">男声</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">曲库</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">音量</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">听歌识曲</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">音色</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">作业</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">音调</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">圈子</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">充值</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">歌单</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">文件夹</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">活动</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">专辑</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea78;</span>
                <div class="name">电台-copy</div>
                <div class="code-name">&amp;#xea78;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea79;</span>
                <div class="name">排行-copy</div>
                <div class="code-name">&amp;#xea79;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">验证码</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">用户-角色-用户名-单人_jurassic</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b2;</span>
                <div class="name">密码</div>
                <div class="code-name">&amp;#xe8b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">chart-pie</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">耳机</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ab;</span>
                <div class="name">爱心</div>
                <div class="code-name">&amp;#xe8ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ac;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">3D眼镜</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ae;</span>
                <div class="name">彩蛋</div>
                <div class="code-name">&amp;#xe8ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">正方形</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea77;</span>
                <div class="name">列表播放</div>
                <div class="code-name">&amp;#xea77;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">列表播放</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">收 藏-产品详情</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">上一曲 - 网易icon</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">上一曲 - 网易icon</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">暂停 停止</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">arrow-left-bold</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">arrow-up-bold</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">arrow-down-bold</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">arrow-right-bold</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">user</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1683771161325') format('woff'),
       url('iconfont.ttf?t=1683771161325') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-31fenxiang"></span>
            <div class="name">
              3.1分享
            </div>
            <div class="code-name">.icon-31fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pinglun"></span>
            <div class="name">
              评论
            </div>
            <div class="code-name">.icon-pinglun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang2"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-renyuanguanli"></span>
            <div class="name">
              人员管理
            </div>
            <div class="code-name">.icon-renyuanguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-33-gerenzhongxin"></span>
            <div class="name">
              个人中心
            </div>
            <div class="code-name">.icon-a-33-gerenzhongxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qita"></span>
            <div class="name">
              其他
            </div>
            <div class="code-name">.icon-qita
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaijin"></span>
            <div class="name">
              快进
            </div>
            <div class="code-name">.icon-kuaijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-luzhi"></span>
            <div class="name">
              录制
            </div>
            <div class="code-name">.icon-luzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyishou"></span>
            <div class="name">
              上一首
            </div>
            <div class="code-name">.icon-shangyishou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaitui"></span>
            <div class="name">
              快退
            </div>
            <div class="code-name">.icon-kuaitui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang1"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingzhi"></span>
            <div class="name">
              停止
            </div>
            <div class="code-name">.icon-tingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiayishou"></span>
            <div class="name">
              下一首
            </div>
            <div class="code-name">.icon-xiayishou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suiji"></span>
            <div class="name">
              随机02
            </div>
            <div class="code-name">.icon-suiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜欢02
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan"></span>
            <div class="name">
              循环03
            </div>
            <div class="code-name">.icon-xunhuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suiji1"></span>
            <div class="name">
              随机05
            </div>
            <div class="code-name">.icon-suiji1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan1"></span>
            <div class="name">
              循环01
            </div>
            <div class="code-name">.icon-xunhuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan2"></span>
            <div class="name">
              循环07
            </div>
            <div class="code-name">.icon-xunhuan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinfu"></span>
            <div class="name">
              音符01
            </div>
            <div class="code-name">.icon-yinfu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan1"></span>
            <div class="name">
              喜欢01
            </div>
            <div class="code-name">.icon-xihuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan3"></span>
            <div class="name">
              循环09
            </div>
            <div class="code-name">.icon-xunhuan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinpinliebiao"></span>
            <div class="name">
              音频列表
            </div>
            <div class="code-name">.icon-yinpinliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suiji2"></span>
            <div class="name">
              随机01
            </div>
            <div class="code-name">.icon-suiji2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinfu1"></span>
            <div class="name">
              音符04
            </div>
            <div class="code-name">.icon-yinfu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan4"></span>
            <div class="name">
              循环06
            </div>
            <div class="code-name">.icon-xunhuan4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suiji3"></span>
            <div class="name">
              随机04
            </div>
            <div class="code-name">.icon-suiji3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan5"></span>
            <div class="name">
              循环02
            </div>
            <div class="code-name">.icon-xunhuan5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinfu2"></span>
            <div class="name">
              音符03
            </div>
            <div class="code-name">.icon-yinfu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan6"></span>
            <div class="name">
              循环08
            </div>
            <div class="code-name">.icon-xunhuan6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinfu3"></span>
            <div class="name">
              音符05
            </div>
            <div class="code-name">.icon-yinfu3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xunhuan7"></span>
            <div class="name">
              循环05
            </div>
            <div class="code-name">.icon-xunhuan7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinfu4"></span>
            <div class="name">
              音符02
            </div>
            <div class="code-name">.icon-yinfu4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofangliebiao"></span>
            <div class="name">
              播放列表
            </div>
            <div class="code-name">.icon-bofangliebiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changpian"></span>
            <div class="name">
              唱片
            </div>
            <div class="code-name">.icon-changpian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoqian"></span>
            <div class="name">
              标签
            </div>
            <div class="code-name">.icon-biaoqian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liaotian"></span>
            <div class="name">
              聊天
            </div>
            <div class="code-name">.icon-liaotian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang1"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-changge"></span>
            <div class="name">
              唱歌
            </div>
            <div class="code-name">.icon-changge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paihang1"></span>
            <div class="name">
              排行
            </div>
            <div class="code-name">.icon-paihang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jifen"></span>
            <div class="name">
              积分
            </div>
            <div class="code-name">.icon-jifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaixin"></span>
            <div class="name">
              开心
            </div>
            <div class="code-name">.icon-kaixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyishou1"></span>
            <div class="name">
              上一首
            </div>
            <div class="code-name">.icon-shangyishou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanxuan"></span>
            <div class="name">
              全选
            </div>
            <div class="code-name">.icon-quanxuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diantai1"></span>
            <div class="name">
              电台
            </div>
            <div class="code-name">.icon-diantai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinle1"></span>
            <div class="name">
              音乐1
            </div>
            <div class="code-name">.icon-yinle1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingge"></span>
            <div class="name">
              听歌
            </div>
            <div class="code-name">.icon-tingge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuaxin"></span>
            <div class="name">
              刷新
            </div>
            <div class="code-name">.icon-shuaxin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shibie"></span>
            <div class="name">
              识别
            </div>
            <div class="code-name">.icon-shibie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shezhi"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiayishou1"></span>
            <div class="name">
              下一首
            </div>
            <div class="code-name">.icon-xiayishou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting1"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjian"></span>
            <div class="name">
              文件
            </div>
            <div class="code-name">.icon-wenjian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai2"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.icon-yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang1"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-shoucang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shequ"></span>
            <div class="name">
              社区
            </div>
            <div class="code-name">.icon-shequ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinle2"></span>
            <div class="name">
              音乐2
            </div>
            <div class="code-name">.icon-yinle2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diantai"></span>
            <div class="name">
              电台
            </div>
            <div class="code-name">.icon-diantai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banzou"></span>
            <div class="name">
              伴奏
            </div>
            <div class="code-name">.icon-banzou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gechang"></span>
            <div class="name">
              歌唱
            </div>
            <div class="code-name">.icon-gechang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paihang"></span>
            <div class="name">
              排行
            </div>
            <div class="code-name">.icon-paihang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiai"></span>
            <div class="name">
              喜爱
            </div>
            <div class="code-name">.icon-xiai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-geshou"></span>
            <div class="name">
              歌手
            </div>
            <div class="code-name">.icon-geshou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bisai"></span>
            <div class="name">
              比赛
            </div>
            <div class="code-name">.icon-bisai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-laoshi"></span>
            <div class="name">
              老师
            </div>
            <div class="code-name">.icon-laoshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nvsheng"></span>
            <div class="name">
              女声
            </div>
            <div class="code-name">.icon-nvsheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei2"></span>
            <div class="name">
              分类2
            </div>
            <div class="code-name">.icon-fenlei2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei1"></span>
            <div class="name">
              分类1
            </div>
            <div class="code-name">.icon-fenlei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongsheng"></span>
            <div class="name">
              童声
            </div>
            <div class="code-name">.icon-tongsheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nansheng"></span>
            <div class="name">
              男声
            </div>
            <div class="code-name">.icon-nansheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quku"></span>
            <div class="name">
              曲库
            </div>
            <div class="code-name">.icon-quku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinliang"></span>
            <div class="name">
              音量
            </div>
            <div class="code-name">.icon-yinliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tinggeshiqu"></span>
            <div class="name">
              听歌识曲
            </div>
            <div class="code-name">.icon-tinggeshiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yinse"></span>
            <div class="name">
              音色
            </div>
            <div class="code-name">.icon-yinse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuoye"></span>
            <div class="name">
              作业
            </div>
            <div class="code-name">.icon-zuoye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yintiao"></span>
            <div class="name">
              音调
            </div>
            <div class="code-name">.icon-yintiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanzi"></span>
            <div class="name">
              圈子
            </div>
            <div class="code-name">.icon-quanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chongzhi"></span>
            <div class="name">
              充值
            </div>
            <div class="code-name">.icon-chongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazai1"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.icon-xiazai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gedan"></span>
            <div class="name">
              歌单
            </div>
            <div class="code-name">.icon-gedan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenjianjia"></span>
            <div class="name">
              文件夹
            </div>
            <div class="code-name">.icon-wenjianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huodong"></span>
            <div class="name">
              活动
            </div>
            <div class="code-name">.icon-huodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanji"></span>
            <div class="name">
              专辑
            </div>
            <div class="code-name">.icon-zhuanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diantai-copy"></span>
            <div class="name">
              电台-copy
            </div>
            <div class="code-name">.icon-diantai-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paihang-copy"></span>
            <div class="name">
              排行-copy
            </div>
            <div class="code-name">.icon-paihang-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanzhengma"></span>
            <div class="name">
              验证码
            </div>
            <div class="code-name">.icon-yanzhengma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jurassic_user"></span>
            <div class="name">
              用户-角色-用户名-单人_jurassic
            </div>
            <div class="code-name">.icon-jurassic_user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima"></span>
            <div class="name">
              密码
            </div>
            <div class="code-name">.icon-mima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chart-pie"></span>
            <div class="name">
              chart-pie
            </div>
            <div class="code-name">.icon-chart-pie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erji"></span>
            <div class="name">
              耳机
            </div>
            <div class="code-name">.icon-erji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aixin"></span>
            <div class="name">
              爱心
            </div>
            <div class="code-name">.icon-aixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Dyanjing"></span>
            <div class="name">
              3D眼镜
            </div>
            <div class="code-name">.icon-Dyanjing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidan"></span>
            <div class="name">
              彩蛋
            </div>
            <div class="code-name">.icon-caidan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-04"></span>
            <div class="name">
              正方形
            </div>
            <div class="code-name">.icon-04
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaobofang"></span>
            <div class="name">
              列表播放
            </div>
            <div class="code-name">.icon-liebiaobofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaobofang1"></span>
            <div class="name">
              列表播放
            </div>
            <div class="code-name">.icon-liebiaobofang1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
              收 藏-产品详情
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyiqu"></span>
            <div class="name">
              上一曲 - 网易icon
            </div>
            <div class="code-name">.icon-shangyiqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangyiqu-wangyiicon"></span>
            <div class="name">
              上一曲 - 网易icon
            </div>
            <div class="code-name">.icon-shangyiqu-wangyiicon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zantingtingzhi"></span>
            <div class="name">
              暂停 停止
            </div>
            <div class="code-name">.icon-zantingtingzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-left-bold"></span>
            <div class="name">
              arrow-left-bold
            </div>
            <div class="code-name">.icon-arrow-left-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-up-bold"></span>
            <div class="name">
              arrow-up-bold
            </div>
            <div class="code-name">.icon-arrow-up-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-down-bold"></span>
            <div class="name">
              arrow-down-bold
            </div>
            <div class="code-name">.icon-arrow-down-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-arrow-right-bold"></span>
            <div class="name">
              arrow-right-bold
            </div>
            <div class="code-name">.icon-arrow-right-bold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-user"></span>
            <div class="name">
              user
            </div>
            <div class="code-name">.icon-user
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31fenxiang"></use>
                </svg>
                <div class="name">3.1分享</div>
                <div class="code-name">#icon-31fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use>
                </svg>
                <div class="name">评论</div>
                <div class="code-name">#icon-pinglun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang2"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-renyuanguanli"></use>
                </svg>
                <div class="name">人员管理</div>
                <div class="code-name">#icon-renyuanguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-33-gerenzhongxin"></use>
                </svg>
                <div class="name">个人中心</div>
                <div class="code-name">#icon-a-33-gerenzhongxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qita"></use>
                </svg>
                <div class="name">其他</div>
                <div class="code-name">#icon-qita</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaijin"></use>
                </svg>
                <div class="name">快进</div>
                <div class="code-name">#icon-kuaijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-luzhi"></use>
                </svg>
                <div class="name">录制</div>
                <div class="code-name">#icon-luzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyishou"></use>
                </svg>
                <div class="name">上一首</div>
                <div class="code-name">#icon-shangyishou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaitui"></use>
                </svg>
                <div class="name">快退</div>
                <div class="code-name">#icon-kuaitui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang1"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi"></use>
                </svg>
                <div class="name">停止</div>
                <div class="code-name">#icon-tingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiayishou"></use>
                </svg>
                <div class="name">下一首</div>
                <div class="code-name">#icon-xiayishou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suiji"></use>
                </svg>
                <div class="name">随机02</div>
                <div class="code-name">#icon-suiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜欢02</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan"></use>
                </svg>
                <div class="name">循环03</div>
                <div class="code-name">#icon-xunhuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suiji1"></use>
                </svg>
                <div class="name">随机05</div>
                <div class="code-name">#icon-suiji1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan1"></use>
                </svg>
                <div class="name">循环01</div>
                <div class="code-name">#icon-xunhuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan2"></use>
                </svg>
                <div class="name">循环07</div>
                <div class="code-name">#icon-xunhuan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinfu"></use>
                </svg>
                <div class="name">音符01</div>
                <div class="code-name">#icon-yinfu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan1"></use>
                </svg>
                <div class="name">喜欢01</div>
                <div class="code-name">#icon-xihuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan3"></use>
                </svg>
                <div class="name">循环09</div>
                <div class="code-name">#icon-xunhuan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinpinliebiao"></use>
                </svg>
                <div class="name">音频列表</div>
                <div class="code-name">#icon-yinpinliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suiji2"></use>
                </svg>
                <div class="name">随机01</div>
                <div class="code-name">#icon-suiji2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinfu1"></use>
                </svg>
                <div class="name">音符04</div>
                <div class="code-name">#icon-yinfu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan4"></use>
                </svg>
                <div class="name">循环06</div>
                <div class="code-name">#icon-xunhuan4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suiji3"></use>
                </svg>
                <div class="name">随机04</div>
                <div class="code-name">#icon-suiji3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan5"></use>
                </svg>
                <div class="name">循环02</div>
                <div class="code-name">#icon-xunhuan5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinfu2"></use>
                </svg>
                <div class="name">音符03</div>
                <div class="code-name">#icon-yinfu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan6"></use>
                </svg>
                <div class="name">循环08</div>
                <div class="code-name">#icon-xunhuan6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinfu3"></use>
                </svg>
                <div class="name">音符05</div>
                <div class="code-name">#icon-yinfu3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunhuan7"></use>
                </svg>
                <div class="name">循环05</div>
                <div class="code-name">#icon-xunhuan7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinfu4"></use>
                </svg>
                <div class="name">音符02</div>
                <div class="code-name">#icon-yinfu4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofangliebiao"></use>
                </svg>
                <div class="name">播放列表</div>
                <div class="code-name">#icon-bofangliebiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changpian"></use>
                </svg>
                <div class="name">唱片</div>
                <div class="code-name">#icon-changpian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqian"></use>
                </svg>
                <div class="name">标签</div>
                <div class="code-name">#icon-biaoqian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liaotian"></use>
                </svg>
                <div class="name">聊天</div>
                <div class="code-name">#icon-liaotian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang1"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-changge"></use>
                </svg>
                <div class="name">唱歌</div>
                <div class="code-name">#icon-changge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paihang1"></use>
                </svg>
                <div class="name">排行</div>
                <div class="code-name">#icon-paihang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jifen"></use>
                </svg>
                <div class="name">积分</div>
                <div class="code-name">#icon-jifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaixin"></use>
                </svg>
                <div class="name">开心</div>
                <div class="code-name">#icon-kaixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyishou1"></use>
                </svg>
                <div class="name">上一首</div>
                <div class="code-name">#icon-shangyishou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanxuan"></use>
                </svg>
                <div class="name">全选</div>
                <div class="code-name">#icon-quanxuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diantai1"></use>
                </svg>
                <div class="name">电台</div>
                <div class="code-name">#icon-diantai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinle1"></use>
                </svg>
                <div class="name">音乐1</div>
                <div class="code-name">#icon-yinle1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingge"></use>
                </svg>
                <div class="name">听歌</div>
                <div class="code-name">#icon-tingge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuaxin"></use>
                </svg>
                <div class="name">刷新</div>
                <div class="code-name">#icon-shuaxin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shibie"></use>
                </svg>
                <div class="name">识别</div>
                <div class="code-name">#icon-shibie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shezhi"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiayishou1"></use>
                </svg>
                <div class="name">下一首</div>
                <div class="code-name">#icon-xiayishou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting1"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjian"></use>
                </svg>
                <div class="name">文件</div>
                <div class="code-name">#icon-wenjian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai2"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#icon-yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang1"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-shoucang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shequ"></use>
                </svg>
                <div class="name">社区</div>
                <div class="code-name">#icon-shequ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinle2"></use>
                </svg>
                <div class="name">音乐2</div>
                <div class="code-name">#icon-yinle2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diantai"></use>
                </svg>
                <div class="name">电台</div>
                <div class="code-name">#icon-diantai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banzou"></use>
                </svg>
                <div class="name">伴奏</div>
                <div class="code-name">#icon-banzou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gechang"></use>
                </svg>
                <div class="name">歌唱</div>
                <div class="code-name">#icon-gechang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paihang"></use>
                </svg>
                <div class="name">排行</div>
                <div class="code-name">#icon-paihang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiai"></use>
                </svg>
                <div class="name">喜爱</div>
                <div class="code-name">#icon-xiai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-geshou"></use>
                </svg>
                <div class="name">歌手</div>
                <div class="code-name">#icon-geshou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bisai"></use>
                </svg>
                <div class="name">比赛</div>
                <div class="code-name">#icon-bisai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-laoshi"></use>
                </svg>
                <div class="name">老师</div>
                <div class="code-name">#icon-laoshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nvsheng"></use>
                </svg>
                <div class="name">女声</div>
                <div class="code-name">#icon-nvsheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei2"></use>
                </svg>
                <div class="name">分类2</div>
                <div class="code-name">#icon-fenlei2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei1"></use>
                </svg>
                <div class="name">分类1</div>
                <div class="code-name">#icon-fenlei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongsheng"></use>
                </svg>
                <div class="name">童声</div>
                <div class="code-name">#icon-tongsheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nansheng"></use>
                </svg>
                <div class="name">男声</div>
                <div class="code-name">#icon-nansheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quku"></use>
                </svg>
                <div class="name">曲库</div>
                <div class="code-name">#icon-quku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinliang"></use>
                </svg>
                <div class="name">音量</div>
                <div class="code-name">#icon-yinliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tinggeshiqu"></use>
                </svg>
                <div class="name">听歌识曲</div>
                <div class="code-name">#icon-tinggeshiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yinse"></use>
                </svg>
                <div class="name">音色</div>
                <div class="code-name">#icon-yinse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuoye"></use>
                </svg>
                <div class="name">作业</div>
                <div class="code-name">#icon-zuoye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yintiao"></use>
                </svg>
                <div class="name">音调</div>
                <div class="code-name">#icon-yintiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanzi"></use>
                </svg>
                <div class="name">圈子</div>
                <div class="code-name">#icon-quanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chongzhi"></use>
                </svg>
                <div class="name">充值</div>
                <div class="code-name">#icon-chongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazai1"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#icon-xiazai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gedan"></use>
                </svg>
                <div class="name">歌单</div>
                <div class="code-name">#icon-gedan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenjianjia"></use>
                </svg>
                <div class="name">文件夹</div>
                <div class="code-name">#icon-wenjianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huodong"></use>
                </svg>
                <div class="name">活动</div>
                <div class="code-name">#icon-huodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanji"></use>
                </svg>
                <div class="name">专辑</div>
                <div class="code-name">#icon-zhuanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diantai-copy"></use>
                </svg>
                <div class="name">电台-copy</div>
                <div class="code-name">#icon-diantai-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paihang-copy"></use>
                </svg>
                <div class="name">排行-copy</div>
                <div class="code-name">#icon-paihang-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanzhengma"></use>
                </svg>
                <div class="name">验证码</div>
                <div class="code-name">#icon-yanzhengma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jurassic_user"></use>
                </svg>
                <div class="name">用户-角色-用户名-单人_jurassic</div>
                <div class="code-name">#icon-jurassic_user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima"></use>
                </svg>
                <div class="name">密码</div>
                <div class="code-name">#icon-mima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chart-pie"></use>
                </svg>
                <div class="name">chart-pie</div>
                <div class="code-name">#icon-chart-pie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erji"></use>
                </svg>
                <div class="name">耳机</div>
                <div class="code-name">#icon-erji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aixin"></use>
                </svg>
                <div class="name">爱心</div>
                <div class="code-name">#icon-aixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Dyanjing"></use>
                </svg>
                <div class="name">3D眼镜</div>
                <div class="code-name">#icon-Dyanjing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidan"></use>
                </svg>
                <div class="name">彩蛋</div>
                <div class="code-name">#icon-caidan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-04"></use>
                </svg>
                <div class="name">正方形</div>
                <div class="code-name">#icon-04</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaobofang"></use>
                </svg>
                <div class="name">列表播放</div>
                <div class="code-name">#icon-liebiaobofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaobofang1"></use>
                </svg>
                <div class="name">列表播放</div>
                <div class="code-name">#icon-liebiaobofang1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name">收 藏-产品详情</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyiqu"></use>
                </svg>
                <div class="name">上一曲 - 网易icon</div>
                <div class="code-name">#icon-shangyiqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangyiqu-wangyiicon"></use>
                </svg>
                <div class="name">上一曲 - 网易icon</div>
                <div class="code-name">#icon-shangyiqu-wangyiicon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zantingtingzhi"></use>
                </svg>
                <div class="name">暂停 停止</div>
                <div class="code-name">#icon-zantingtingzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-left-bold"></use>
                </svg>
                <div class="name">arrow-left-bold</div>
                <div class="code-name">#icon-arrow-left-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-up-bold"></use>
                </svg>
                <div class="name">arrow-up-bold</div>
                <div class="code-name">#icon-arrow-up-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-down-bold"></use>
                </svg>
                <div class="name">arrow-down-bold</div>
                <div class="code-name">#icon-arrow-down-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-arrow-right-bold"></use>
                </svg>
                <div class="name">arrow-right-bold</div>
                <div class="code-name">#icon-arrow-right-bold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-user"></use>
                </svg>
                <div class="name">user</div>
                <div class="code-name">#icon-user</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
